<template>
  <div class="audio_box">
    <audio :src="songurl" ref="audio"></audio>
    <au-control
      :current="currentTime"
      :duration="duration"
      :value="value"
      :playing="playing"
      @tragsongslider="inputhandle"
      @changesongslider="changeHandle"
      @next="next"
      @play="play"
      @pause="pause"
      @muted="muted"
      @turnvoice="turnVoice"
      @setVal="setValue"
    ></au-control>
  </div>
</template>

<script>
import auControl from 'components/au-control/au-control'
import { mapGetters, mapMutations } from 'vuex'
export default {
  mounted () {
    // let main = document.querySelector("main")
    // let popper = document.querySelector(".mypopper")
    // main.addEventListener("mouseup", e => {
    //   e.cancelBubble = false
    //   if (!popper.contains(e.target)) {
    //     this.showflag = false
    //   }
    // })
    this.audio = this.$refs.audio
    this.audio.addEventListener("canplay", () => {
      this.duration = parseInt(this.audio.duration, 10)
      console.log("加载完毕，能够播放")
      this.play()
    })
    this.audio.addEventListener("ended", () => {
      this.next()
    })
  },
  data () {
    return {
      audio: null,
      currentTime: 0,
      duration: 0,
      timeId: '',
      value: 0,
      playing: false
    }
  },
  methods: {
    //播放
    play () {
      // if (this.currentTime) {
      //   this.audio.currentTime = this.currentTime
      // }
      this.audio.play()
      this.playing = true
      this.timeId = setInterval(() => {
        this.currentTime = parseInt(this.audio.currentTime)
        this.value = Number((this.audio.currentTime / this.duration * 100).toFixed(1))
      }, 1000)
    },
    //暂停
    pause () {
      this.audio.pause()
      this.playing = false
    },
    //拖拽完成后的跳转
    changeHandle (newval) {
      this.currentTime = this.audio.currentTime = parseInt(this.duration * (newval / 100))
    },
    //拖动current实时更新
    inputhandle (newval) {
      // clearInterval(this.timeId)
      let send = (newval / 100).toFixed(4)
      this.currentTime = parseInt(this.duration) * send
    },
    //静音
    muted (value, mutedflag) {
      this.audio.volume = value
      this.audio.muted = mutedflag
    },
    //调节声音
    turnVoice (val) {
      this.audio.volume = val
    },
    //上一首
    precur () {
      this.currentReduce()
    },
    //下一首
    next () {
      this.currentAdd()
    },
    setValue (val) {
      //实现双向绑定
      this.value = val
    },
    throttle () {
      let timer = null
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            this.currentTime = parseInt(this.audio.currentTime)
            this.value = Number((this.audio.currentTime / this.duration * 100).toFixed(1))
            timer = null
          }, 1000)
        }
      }
    },
    //显示歌单
    showsonglist () {
      this.showflag = !this.showflag
      this.list = this.songlist
    },
    ...mapMutations([
      'currentAdd', 'currentReduce'
    ])
  },
  computed: {
    songurl () {
      if (this.currentIndex != null) {
        return this.songlist[this.currentIndex].songUrl
      }
      return ''
    },
    // value(){
    //   return this.currentTime/this.duration*100
    // },
    ...mapGetters([
      'songlist', 'currentIndex'
    ])
  },
  components: {
    auControl
  }
};
</script>

<style lang="scss" scoped>
.audio_box {
  height: 100%;
  background-color: #eee;
}
.voice_contral {
  position: relative;
}
.el-button {
  background-color: #e20d0f;
  border: 1px solid transparent;
  color: #fff;
  &:hover,
  &:focus {
    background-color: #c20c0c;
    color: #fff;
    border: 1px solid transparent;
  }
  &.voice-icon {
    color: rgba($color: #000, $alpha: 0.6);
    background-color: transparent;
    padding: 0;
    font-size: 16px;
    position: absolute;
    left: 20px;
    top: 15px;
  }
  &.loop-icon {
    color: rgba($color: #000, $alpha: 0.6);
    background-color: transparent;
    padding: 0;
    font-size: 16px;
    position: absolute;
    right: 20px;
    top: 15px;
  }
}

.block {
  position: relative;
  .floatspan {
    position: absolute;
    user-select: none;
    width: 30px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
    &.float_left {
      left: -10px;
      top: 15px;
    }
    &.float_right {
      right: -10px;
      top: 15px;
    }
  }
}

.mypopper {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: -501px;
  width: 600px;
  height: 500px;
  z-index: 2001;
  overflow: auto;
  box-shadow: 1px 1px 10px rgba(#000000, 0.8);
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #ccc;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
}
</style>

<style lang="scss">
.mypopper .el-table__body tr.current-row > td,
.mypopper
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td {
  background-color: rgba($color: #aaa, $alpha: 0.3);
}

.mypopper
  .el-table--striped
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td,
.mypopper .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba($color: #aaa, $alpha: 0.3);
  user-select: none;
  color: #000;
}
</style>